<template>
	<div class="layout">
		<Layout :style="{ minHeight: '100vh' }">
			<Sider
				ref="side1"
				hide-trigger
				collapsible
				:collapsed-width="0"
				v-model="isCollapsed"
				:width="310"
				:style="{
					'background-color': '#fff',
					'border-right': '1px solid #ddd',
				}"
			>
				<MainList></MainList>
			</Sider>
			<Layout>
				<Header :style="{ padding: 0 }" class="layout-header-bar">
					<Icon
						@click.native="collapsedSider"
						:class="rotateIcon"
						:style="{ margin: '0 20px' }"
						type="ios-arrow-dropleft"
						size="24"
					></Icon>
				</Header>
				<Content
					:style="{
						margin: '20px',
						background: '#fff',
						minHeight: '260px',
					}"
				>
					<HomeContent />
				</Content>
			</Layout>
		</Layout>
	</div>
</template>

<script>
// import TopList from './TopList.vue';
import MainList from './MainList.vue';
import HomeContent from './HomeContent.vue';
export default {
	components: {
		// TopList,
		MainList,
		HomeContent,
	},
	data() {
		return {
			isCollapsed: false,
		};
	},
	computed: {
		rotateIcon() {
			return ['menu-icon', this.isCollapsed ? 'rotate-icon' : ''];
		},
		menuitemClasses() {
			return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
		},
	},
	methods: {
		collapsedSider() {
			this.$refs.side1.toggleCollapse();
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	min-height: 100vh;
}
.layout-header-bar {
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
	width: 90%;
	height: 30px;
	background: #5b6270;
	border-radius: 3px;
	margin: 15px auto;
}
.menu-icon {
	transition: all 0.3s;
}
.rotate-icon {
	transform: rotate(-180deg);
}
.menu-item span {
	display: inline-block;
	overflow: hidden;
	width: 69px;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	transition: width 0.2s ease 0.2s;
}
.menu-item i {
	transform: translateX(0px);
	transition: font-size 0.2s ease, transform 0.2s ease;
	vertical-align: middle;
	font-size: 16px;
}
.collapsed-menu span {
	width: 0px;
	transition: width 0.2s ease;
}
.collapsed-menu i {
	transform: translateX(5px);
	transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
	vertical-align: middle;
	font-size: 22px;
}
</style>
